<template>
  <div style="padding:0">
    <div class="flex justify-center preview_page">
      <div
        class="ipX_wrap"
        style="margin-right:100px"
      >
        <page-content
          :type="1"
          :pageData="pageData"
        ></page-content>
      </div>
      <div class="ip7_wrap">
        <page-content
          :type="2"
          :pageData="pageData"
        ></page-content>
      </div>
    </div>
    <div
      class="fix-footer-btns"
      style="margin-top:0"
    >
      <el-button
        size="small"
        @click="$router.go(-1)"
      >返回</el-button>
    </div>
  </div>
</template>

<script>
import { previewIndex } from "@/api/xcx";
import pageContent from "./components/content";
export default {
  components: { pageContent },
  data() {
    return {
      pageData: []
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      previewIndex().then(res => {
        for (let item of res) {
          const obj = JSON.parse(item.params);
          this.pageData.push({ type: item.type, data: obj });
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.preview_page {
  padding: 15px 0;
  background-color: #f3f7fa;
}
.ipX_wrap,
.ip7_wrap {
  width: 450px;
  height: 878px;
  background-repeat: no-repeat;
}
.ipX_wrap {
  padding: 21px 37px 127px;
  background-image: url(../../../assets/images/iphoneX-bg.jpg);
  /deep/.m_content {
    border-radius: 30px 40px 0 0;
  }
}
.ip7_wrap {
  padding: 105px 42px 156px 32px;
  background-image: url(../../../assets/images/iphone7-bg.jpg);
}
</style>
